<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #app {
      width: 200px;
      height: 200px;
      background: #ccc;
    }

    #app > p {
      background: red;
    }
  </style>
</head>
<body>
<div id="app">
  <p id="p">1</p>
  <p class="p">2</p>
  <p class="p">3</p>
  <p class="p">4</p>
</div>
<script>
  /*
  * DOM事件
  *    基本概念：DOM事件的级别
  *     DOM0： element.onclick = function () {}
  *     DOM2:  element.addEventListener('click', function() {}, false(默认是false: 冒泡事件触发, true: 这个事件是在捕获事件触发))
  *     DOM3:  element.addEventListener('keyup', function(){},false) 增加了很多的事件类型
  *
  *    DOM事件模型： 就是说DOM事件的捕获和冒泡  捕获是从上往下， 冒泡是从下往上
  *
  *    DOM事件流：浏览器在为这个当前页面与用户做交互的过程中，比如说我点击了鼠标， 这个鼠标是怎么传到这个页面上，这个就是事件流
  *       一个完整的事件流分三个阶段：捕获 =》 目标阶段（比如点击了按钮，这个按钮就是目标阶段） =》 冒泡（从目标阶段上传到window）
  *
  *    描述DOM事件捕获的具体流程：
  *       捕获：window => document => html => body => ....
  *       冒泡：... => body => html => document => window
  *
  *       document.body: 获取body标签
  *       document.documentElement: 获取html标签
  *
  *    Event对象的常见应用：想拿用户用的鼠标的哪个键， 用户敲中键盘的哪个键 ...
  *      event.preventDefault() : 阻止默认事件，比如是a标签，就阻止了href默认跳转的效果
  *      event.stopPropagation() : 阻止冒泡
  *      event.stopImmediatePropagation() : 如果给一个元素添加了两个click事件， 被点击之后如果不想触发第二个事件， 就在第一个里边添加这句话（事件响应优先级）
  *
  *      事件委托
  *      event.currentTarget : 当前所绑定事件的对象， 就比如说父级绑定了事件， 这个就是那个父级
  *      event.target（早期的ie是不支持的，需要用srcElement） ： 父级元素绑定了事件，当前子元素被点击，冒泡到父级元素事件， 这个返回就是当前被点击的子元素
  *
  *      什么是事件委托（事件代理）：比如一个元素下边有10个子元素需要绑定事件，需要放在父级元素上边，绑定一次事件就可以，但是你还得再这个事件中判断到底是这个10个子元素哪个被点击了
  *
  *    自定义事件：
  *     var eve = new Event("custome");
  *
  *     element.addEventlistener("custome", function(){ console.log("custome") }) // 绑定自定义事件
  *
  *     element.dispatchEvent(eve) // 触发自定义事件
  *
  *
  *     还有一个CustomEvent： new CustomEvent("custome", {a: 1})
  *
  *     有什么区别：Event 不能添加数据， CustomEvent可以添加数据
  *
  *
  * */

  var app = document.getElementById('app');
  var p = document.getElementById('p');


  // app.addEventListener('click', function (e) {
  //   console.log(e.target)
  // })

  // var eve = new Event("custome");
  //
  // p.addEventListener("custome", function () {
  //   console.log("触发了");
  // });
  //
  // app.addEventListener("click", function () {
  //   p.dispatchEvent(eve);
  // })

  var eve = new CustomEvent("custome", {detail:{"a":true}});

  p.addEventListener("custome", function (data) {
    console.log(data.detail);
  });

  app.addEventListener("click", function () {
    p.dispatchEvent(eve);
  })


</script>
</body>
</html>
